<h1>电商全端项目-乐淘</h1>
<!-- 项目初始化===================================== -->

<body>
    1. 准备项目 -> 解压乐淘（盘符中不要有中文）
    2. 准备数据库mysql（开启phpstudy）运行sql文件
    3. 启动项目 在跟目录打开命令窗口 -> 输入 npm start （开启后不能关闭，如果项目报错，需要重启服务）
    乐淘端口号为 3000 -> localhost:3000
    4. 将我们要写的代码放入public文件夹中
    移动端商城页面访问：http://localhost:3000/mobile
    后端管理页面访问：http://localhost:3000/manage
</body>


<!-- login 页面==================================================== -->

<body>
    1. 利用bootstrap中的删格系统来实现媒体查询 - 使用bootstrap中组件 -> 面版 -> 带标题面版 ---> 使用 全局css样式 -> 表单 -->

    2. 使用bootstrap-validator插件来验证表单的规则(需要引入bootstrap-validator的css文件 和 js文件)
    2.1 使用form表单调用bootstrapValidator()方法,然后配置验证的选项

    3. 注意: 1. 使用submit按钮,会提交表单数据, 刷新页面,页面的原始数据会丢失
    2. bootstrapvalidator 必须配合submit才可以使用,只有点击submit按钮才会进行验证表单

    解决方法: 使用submit 按钮进行提交,并且要阻止submit按钮的默认行为 在表单验证成功的事件中阻止submit的默认行为 e.preventDefault();

    注册表单验证成功的事件(当点击submit按钮,只有在表单验证成功的时候才会触发该事件)
    $("#form").on('success.form.bv', function (e) {
    //阻止表单的默认提交
    e.preventDefault();
    //使用ajax提交逻辑
    });

    4. 点击重置按钮,清空表单文本内容,与所有的错误信息与图表
    注意: 重置按钮只能清空表单文本内容,无法清除错误信息与图表
    解决方案:
    在点击事件中 写上$("#form").data('bootstrapValidator').resetForm();即可

    5. 更新字段的状态
    5.1 在验证所有字段中加上 callback: {message: '用户名错误'} 表示: 配置给回调函数使用的验证规则
    callback是固定的,当要校验的规则中没有,就使用callback
    5.2 使用 $("#form").data('bootstrapValidator').updateStatus(field, status, validatorName);

    field: 更新的字段名称（表单的name属性）
    status： 要改变的状态（有四种）
    validatorName: 验证功能的名字（一般有： notEmpty, stringLength, callback)

    status的值有：

    - NOT_VALIDATED：未校验的
    - VALIDATING：校验中的
    - INVALID ：校验失败的
    - VALID：校验成功的。

    6. 实现进度条功能(每一个页面都有,所以新建一个common.js文件)
    思路: 利用jq的全局函数,当页面中第一个ajax请求开始,开启进度条NProgress.start(),当ajax请求结束,完成进度条NProgress.done();
    去除右边加载的小圆圈(看github上的配置选项) NProgress.configure({ showSpinner: false });
    jq的全局函数
    $(document).ajaxSend(function () {}) ajax请求前触发
    $(document).ajaxComplete(function () {}) ajax完成触发
    $(document).ajaxError(function () {}) ajax失败触发
    $(document).ajaxSuccess(function () {}) ajax成功触发
    $(document).ajaxStart(function () {}) 第一个ajax开始触发
    $(document).ajaxStop(function () {}) ajax结束触发
</body>

<!-- index.html======================================================= -->

<body>
    功能:
    1. 创建并切换到index分支 git checkout -b index

    2. 写页面中公共的布局,和js效果(侧边栏, 右侧顶部条)
    2.1 公共的js效果
    - 点击分类管理,切换二级菜单
    - 点击切换菜单,切换侧边栏的显示隐藏(切换类名,并提前写好有该类名的样式,与动画效果即加过渡)
    - 点击退出按钮,发送ajax请求,获取响应数据,成功则跳转login.html

    3. 实现侧边栏导航的跳转链接,分别新建页面,再进行跳转
    4. 实现点击菜单导航高亮效果(思路:点击跳转指定导航,并让当前的li添加current类名)
    5. 利用数据可视化插件Echarts来实现人数与销售的页面渲染
</body>

<!-- islogin.js================================================ -->

<body>
    功能: 除了login.html外,其他文件都需要判断用户是否登录过
    思路: 当页面一开始加载就判断用户是否登录即发生ajax请求,在成功的回调函数中实现逻辑
</body>

<!-- user.html====================================================== -->
<body>
    功能: 
        1. 点击用户管理导航,根据后端接口发送ajax请求,获取响应数据,并渲染到页面上
        2. 渲染分页控件
            思路: 在ajax请求成功的事件中,配置分页控件 使用 bootstrap-paginator插件渲染分页控件
        3. 序号优化 公式: 当前遍历元素下标i+ 1+ (当前页数-1) *每页条数 即 [ i+1+(page-1)*size ]
        4. 点击按钮,显示模态框(使用bootstrap中的模态框),并记录当前被点击的数据,id 和 isDelete
            思路: id 提前用自定义属性保存起来, 然后在点击事件中获取
                  isDelete: 根据当被点击按钮的颜色来判断(hasClass('btn-success')? 1 : 0)
        5. 修改启动和禁用状态
           思路: 在模态框中点击确定按钮,发送ajax请求,成功,隐藏模态框,并刷新当前页面,失败: 直接隐藏模态框

    
</body>

<!-- first.html -->
<body>
    功能: 1. 修改路径导航,与其他布局
          2. 渲染一级分类的表格和分页控件
          3. 用bootstrap写模态框
          4. 点击添加分类按钮,弹出模态框,使用属性data-toggle="model" data-target="#模态框id名"
          5. 使用bootstrapValidator校验表单规则,
          注意项: 
            1- 表单项不在表单域中
                <form id="form"></form>
                给下面表单项添加form属性等于form表单的id值即可指定该表单项是属于这个表单域的 (form="form")
                <input type="text" form="form">
            2- 使用bootstrapValidator校验表单,必须配合submit才可以使用,但是submit按钮默认会提交数据,刷新页面
                解决方法: 给form表单项注册success.form.bv事件,在事件函数中,阻止 e.preventDefault(),后发送ajax请求
          6. 添加一级分类数据
              思路: 发送ajax请求,接收数据,判断是否成功,成功: 关闭模态框, 让当前页数为第一页, 清空模态框中的样式和内容
                                                    失败: 关闭模态框
</body>

<!-- second.html -->
<body>
    功能: 
        1. 发送请求,渲染二级分类信息,和分页控件到页面上
            思路: 借助模板引擎 和 bootstrapPaginator 插件
        2. 点击添加分类按钮,显示模态框,(给该按钮添加 data-target="model" data-toggle="#模态框id名")
        3. 模态框的一级分类的数据渲染
            思路: 发送请求,利用模板引擎拼接字符串渲染到页面上
        4. 点击模态框中一级分类中的数据,让请输入一级分类文字变成选中的数据,并所属分类的id赋值给隐藏域的value
        5. 图片上传和表单上传是分离的
            图片上传思路: 
                    - 借助jq的 fileupload插件来实现
                    - 给file表单项写成
                        <!-- name指定图片上传时的name属性 -->
                        <!-- data-url指定图片上传时的接口地址 -->
                        <!-- multiple指定多文件上传 -->
                        <input id="fileupload" type="file" name="files" data-url="server/php/">
                    - 调用fileupload({
                        dataType: 'json,'
                        done: function(e, data) {
                            data: 是图片的信息,保存服务器端的图片路径
                        }
                    })
        6. 验证模态框中表单的数据规则
            注意: 表单项中有隐藏域,要让隐藏域也能有校验
        7. 两个隐藏域的id状态需要手动更新
        7. 表单上传
            注意: submit没在表单项中,要给submit按钮添加 form属性等于form表单项的id值 form="form"即可
            思路:
                - 给form表单注册success.form.bv事件,(该事件会在表单验证时触发)
                - 阻止submit的默认行为
                - 发送ajax请求,接收数据,判断是否成功,成功: 1.关闭模态框 2.让当前页数为第一页,并重新渲染二级分类信息,和分页控件 3.清空模态框中的样式和内容
                                                        4. 手动恢复表单项以外的内容
                                                  失败: 关闭模态框


</body>

<!-- product.html -->
<body>
    功能:
         1. 渲染商品信息和分页控件
         2. 模态框的静态页面
         3. 利用jq的fireupload插件上传商品图片(如果选中图片大于3张,需要将最旧的那张删除)

         4. 二级分类下拉列表渲染
         4. 点击 二级分类下拉列表,将内容渲染在按钮上,并保存id到隐藏域中
         5. 验证表单模态框的数据规则
         6. 手动更新表单域以外的状态
         7. 表单上传
            思路: -注册在表单验证成功的事件,在事件处理函数中,阻止submit默认行为,再发生ajax请求,提交数据,
                    成功: 1.隐藏模态框, 2.渲染第一页数据, 3.重置表单项,4.恢复表单域以外的默认数据
                    失败: 隐藏模态框
</body>